<template>
  <div style="height: 7vh">
    <div
        style="height: 8vh;justify-content: center;color: white;background: rgb(16, 25, 56) url('/homeHeaderImg.png');
      background-size: 100% 170%;font-size: 26px;font-family: 宋体;display: flex">
      <div style="font-weight: bold;font-size: 30px;color:#ffffff;text-align: center">智慧消防监管平台</div>
      <div style="position: absolute;top:10px;right: 0">
        <el-dropdown>
        <span>
          <i class="element-icons el-icon-s-tools"
             style="font-size: 30px;color:#1a5cd7;text-decoration: underline;cursor:pointer;"></i>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <HomeMapShow style="height: 93vh"/>
  <div class="container">
    <div class="left">
      <div class="left-top">
        <div class="items" @click="wulianClick">
          <div style="display: flex;margin-top: 10px">
            <Image/>
            <span style="margin-top: -5px;margin-left: 5px">物联云维平台设备统计</span>
          </div>
          <Pie style="height: 70%"/>
          <div class="dataContainer">
            <div class="item">
              <span class="text">昨天报警数</span>
              <span class="data">{{ alarmData.yesterday }}</span>
            </div>
            <div class="item">
              <span class="text">今天报警数</span>
              <span class="data">{{ alarmData.today }}</span>
            </div>
            <div class="item">
              <span class="text">报警待处理设备数</span>
              <span class="data">{{ alarmData.pending }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="left-bottom">
        <div class="items" @click="haiwanClick">
          <div style="display: flex;margin-top: 10px">
            <Image/>
            <span style="margin-top: -5px;margin-left: 5px">海湾服务系统报警趋势</span>
          </div>
          <Zhexian style="height: 90%"/>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-top">
        <div class="items" @click="yongdianClick">
          <div style="display: flex;margin-top: 10px">
            <Image/>
            <span style="margin-top: -5px;margin-left: 5px">智慧用电设备数量统计</span>
          </div>
          <BarChat/>
        </div>
      </div>
      <div class="right-bottom">
        <div class="items" @click="linhuoClick">
          <div style="display: flex;margin-top: 10px">
            <Image/>
            <span style="margin-top: -5px;margin-left: 5px">林火检测视频监控</span>
          </div>
          <Monitor/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {HomeFilled} from "@element-plus/icons-vue";
import Pie from "@/views/homeComponents/UnitPie.vue";
import Map from "@/views/homeComponents/Map.vue";
import Zhexian from "@/views/homeComponents/ZheXian.vue";
import AlarmType from "@/views/homeComponents/AlarmType.vue";
import Image from "@/views/homeComponents/Image.vue";
import HomeMapShow from "@/views/homeComponents/mapComponent/HomeMapShow.vue";
import BarChat from "@/views/homeComponents/BaChart.vue";
import Monitor from "@/views/homeComponents/Monitor.vue";
export default {
  components: {Monitor, BarChat, HomeMapShow, Image, AlarmType, Zhexian, Map, Pie, HomeFilled},
  data(){
    return{
      isDropdownVisible: false,
      userInformation:JSON.parse(localStorage.getItem("user")),
      inputNum:0,
      classNum:0,
      majorNum:0,
      alarmData:{
        yesterday:"11",
        today:"22",
        pending:"22"
      }
    }
  },
  mounted() {

  },

  methods:{
    wulianClick(){
      window.open('https://ht.v3.iothonest.com/index')
    },
    haiwanClick(){
      window.open('https://smartfire.gst.com.cn/gss/base/dashboard/company')
    },
    yongdianClick(){
      window.open('http://txmg.sztosee.cn/index.html')
    },
    linhuoClick(){
      window.open('https://124.167.249.190:1443/portal/ui/index')
    },
    loginOut(){
      this.$router.push("/login")
      localStorage.clear()
    }
  },
};

</script>

<style scoped>
span{
  color: #ffffff;
  font-size: 18px;
}
th{
  font-size: 18px;
}

.container {
  margin-top: 7vh;
  justify-content: space-between;
  position: absolute;
  display: flex;
  width: 100vw;
  height: 93vh;
}

.left {
  margin-top: 15px;
  margin-left: 10px;
  z-index: 100;
  width: 29%;
  height: calc(100% - 7vh);
  display: flex;
  flex-direction: column;
}

.right {
  margin-top: 15px;
  margin-right: 10px;
  z-index: 100;
  width: 29%;
  height: calc(100% - 7vh);
  display: flex;
  flex-direction: column;
}
.left > div, .center > div, .right > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-top, .right-top{
  height: 50%;
}

.left-bottom, .right-bottom {
  padding-top: 5vh;
  height: 50%;
}



.container p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}

.items{
  position: relative;
  border:1px solid #069;
  border-radius: 4px;
  height: 100%;
  width: 100%;
}

.dataContainer {
  display: flex;
  justify-content: space-around; /* 使得子元素在容器中水平等间距排列 */
  width: 100%;
  font-size: 18px;
}

.text {
  color: white; /* 文字颜色为黑色 */
}
.data {
  color: #20fdfa;; /* 数据颜色为红色 */
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

</style>
